<template>
   <div class="Post">
        <div class="post">
          <h3>时刻洞察行业的最新动态？填写邮箱立即订阅</h3>
          <div class="sear-box">
            <input class="input-box" type="text" autocomplete="off" placeholder="请填写邮箱" v-model="email">
            <button type="submit" class="sub-btn cursor" @click="submit">提交</button>
          </div>
        </div>
  </div>
</template>

<script>
import { postSubscribe } from '@/request/api'

export default {
  name:'Post',
	data(){
		return{
			email: ''
		}
	},
	methods:{
		submit() {
			if(!this.email){
				this.$toastVant.fail('邮箱不能为空！')
				return false
			}else if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)){
				this.$toastVant.fail('邮箱格式错误！')
				return false
			}else{
				postSubscribe({'email':this.email}).then(res => {
					if(res.status === 200){
						this.email = ''
						this.$toastVant.success('订阅成功！')
					}
				}).catch(err => {
          this.$message.error(err.message)
        })
			}
		}
	}
}
</script>

<style scoped>
.Post{
  background: #fff;
}
.post{
  width: 100%;
  height:199px;
  font-size:18px;
  color: #fff;
  background-size: 100% 100%;
  background: url('../../../assets/images/post.png') no-repeat center;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sear-box{
  width: 442px;
  height: 45px;
  line-height: 45px;
  margin-top: 36px;
  border:1px solid #EFB980;
  border-radius:19px;
  position: relative;
}
.sear-box .input-box{
  height: 100%;
  width: 360px;
  background: none;
  padding:0 15px
}
.sear-box .sub-btn{
  position: absolute;
  top: -1px;
  right: -2px;
  height: 45px;
  width: 80px;
  background: #E48B2C;
  border-top-right-radius:19px;
  border-bottom-right-radius:19px;
}

</style>
